<template>
    <div>
        <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户总览</el-breadcrumb-item>
    </el-breadcrumb>
        <!-- 图表局域 -->
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
   会员数量 <span>2373</span>
</el-card>
      
      </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
  已交会费会员 <span>2</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
  未交会费会员 <span>2371</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
         平台已考执照数 <span>0</span>
</el-card>
      
      </div></el-col>
</el-row>

<div>
    <!-- 详细图表区域 -->
  <el-card class="box-card">
       <ve-line :data="chartData" class="ve-line"></ve-line>
      <el-row>
        <!-- <el-col :span="12"><span>用户构成</span>
<ve-pie :data="piechartData"></ve-pie>
        </el-col> -->
        
      </el-row>
         
       
</el-card>
    
</div>
    </div>


</template>
<script>
  export default {
    data () {
      return {

        chartData: {
          columns: ['日期', '新增用户'],
          rows: [
            { '日期': '2020-05-22', '新增用户': 3 },
            { '日期': '2020-05-23', '新增用户': 3 },
            { '日期': '2020-05-24', '新增用户': 3 }
          ]
        },
         piechartData: {
          columns: ['日期', '会员'],
          rows: [
            
            { '日期': '已交', '会员': 2 },
           { '日期': '未交', '会员': 2371 },
            
          ]
        },
userNum:0
,userpayed:0,
usernotpayed:0,
lienseNUm:0,
      
      }
    },
    methods:{
async getUserNum(){
const {data:res}=await this.$http.get("/user/getUserNum");
if(res.code!==200){
  this.$message.error("获取用户数量失败！")
}
console.log(res.data);
this.userNum=res.data.userNum
this.userpayed=res.data.userpayed
this.usernotpayed=res.data.usernotpayed
this.lienseNUm=res.data.lienseNUm
}


    },
    created(){
      this.getUserNum();
    }
  }
</script>
<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}


.box-card{
margin: 5px;
height: 100%;
width: 100%;

}
.ve-line{
 width: 200px; 
height: 100px;

}
.num{
background-color:write;
font-family: "微软雅黑";
font-size: 10px;
height: 50px;
width: 100%;
margin: 5px;
}
.num:hover{
-webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    background-color:yellowgreen;
  
}

</style>